<template>
    <div class="modal">
        <Modal v-model="data.isShow" :mask-closable="false" width="800" :styles="{top: '80px'}">
			<p slot="header" class="header-view">选择影厅</p>
            <div class="main-view">
                <div class="filter-view">
                    <XSearchFilterModule 
                        :data="item" :scales="scales" :status="status" :index="index"
                        v-for="(item,index) in searchFilterData"
                        :key="index"
                        ref="search"
                        @on-search="clickSearch">
                    </XSearchFilterModule>
                </div>
                <div class="movieCard-view">
                    <div :class="{'card-active': currentIndex === index}" class="card-item"  v-for="(item, index) in movieListData" :key="index" @click="clickCard(item,index)">
                        <div class="card-head">
                            <img :src="url" alt="">
                            <p>空闲</p>
                            <p><span v-for="temp in searchFilterData">{{JSON.parse('{'+ item.dimes +'}')[temp.did]}}</span></p>
                        </div>
                        <div class="card-main">
                            <p class="name">{{item.name}}</p>
                            <p class="num">{{item.number}}</p>
                        </div>
                        <!-- <div class="card-foot" v-if="item.isReserve">
                            <p>预约时间：12:00</p>
                        </div> -->
                    </div>
                </div>
            </div>
            <div slot="footer">
				<Button type="primary" @click="clickSubmit">完成</Button>
				<Button @click="data.isShow = false">取消</Button>
			</div>
		</Modal>
    </div>
</template>

<script>
import roomService from '@/network/service/roomService.js'
import $ from 'jquery'
import XSearchFilterModule from '@/components/XSearchFilterModule'
    export default {
        components: {
            XSearchFilterModule
        },
        props: ['data'],
        data() {
            return {
                currentIndex: -1,
                scales: ['', ''],
                searchFilterData: [],
                movieListData: [],
                status: 1,
                url: require('@/assets/leisure.png')
            }
        },
        mounted() {
            let title = $('.ivu-modal-body .main-view .item');
            for (let i = 0; i < title.length; i++) {
                title[i].style.color = '#433e41';
            }
            this.getDimensions();
            this.getRoomList();
        },
        methods: {
            dimesJson(val) {
                let json = JSON.parse('{'+ this.data.dimes +'}');
                return json[val]
            },
            clickCard(item,index) {
                this.currentIndex = index;
                this.data.data = item;
            },
            clickSearch(formData, index) {
                this.scales[index] = formData.did
                for(let i = 0; i < this.$refs.search.length; i++) {
                    this.$refs.search[i].getDimensionDetails();
                }
                this.getRoomList();
            },
            clickSubmit() {
                this.$emit('on-submit', this.data);
            },

            getDimensions () {
                roomService.getDimensions().then(res =>{
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        this.searchFilterData = result.data;
                    } else {
                        this.$Message.error(resmsg);
                    }
                }, error => {
                    this.$Message.error('服务器异常，请稍后再试')
                })
            },
            getRoomList() {
                let params = {
                    scales: this.scales.join(','),
                    status: 1,
                }
                roomService.getRoomList(params).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        this.movieListData = result.data;
                    } else {
                        this.$Message.error(resmsg);
                    }
                }, error => {
                    this.$Message.error('服务器异常，请稍后再试');
                })
            },
        }
    }
</script>

<style scoped lang="less">
.header-view {
	text-align: center;
	font-size: .14rem;
	color: #433E41;
}
.main-view {
    .filter-view {
        color: #433E41;
        margin-bottom: .3rem;
    }
    .movieCard-view {
        display: flex;
        flex-wrap: wrap;
        .card-item {
            width: 2rem;
            height: 1.7rem;
            box-shadow: 0 0 12px 0 rgba(225,225,226,0.50);
            border: .01rem solid rgba(225,225,226,0.50);
            border-radius: .05rem;
            margin-right: .3rem;
            margin-bottom: .3rem;
            .card-head {
                padding: .05rem 0;
                display: flex;
                align-items: center;
                position: relative;
                background: #74CE6B;
                color: #fff;
                border-radius: .05rem .05rem 0 0;
                img {
                    width: .3rem;
                    height: .3rem;
                    margin-right: .1rem;
                }
                p:last-of-type {
                    position: absolute;
                    right: .1rem;
                }
            }
            .card-main {
                margin-top: .4rem;
                margin-bottom: .1rem;
                color: #433E41;
                p {
                    text-align: center;
                }
            }
            .card-foot {
                padding: 0 .1rem;
            }
        }
        .card-active {
            border: .01rem solid #74CE6B;
        }
    }
    
}
</style>